<template>
    <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="图书名称" prop="name">
            <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="price">
            <el-input v-model="form.author" disabled></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input v-model="form.price" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="price">
            <el-input
                type="textarea"
                v-model="form.describe"
                placeholder=""
                disabled
            ></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="cid">
            <el-input
                v-model="form.publish.pname"
                placeholder=""
                disabled
            ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="price">
            <el-input v-model="form.publish.phone" disabled></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="closeForm(formRef)"
                >关闭</el-button
            >
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { insertBook, editBook, getBook, getBooksList } from "../api/api";
const formRef = ref();
const props = defineProps({ id: { type: Number } });
const emit = defineEmits("close");
const form = reactive({
    id: props.id,
    name: "",
    author: "",
    price: "",
    describe: "",
    publish: {
        pname: "",
        phone: "",
    },
});

onMounted(() => {
    loadBookDetails();
});

const loadBookDetails = async () => {
    if (form.id) {
        const data = await getBook(form.id);
        if (!data) {
            emit("close");
        }
        Object.assign(form, data);
    }
};

//关闭详情
const closeForm = (formRef) => {
    emit("close");
};

//通过父来调用重置
const resetF = (id) => {
    form.id = id;
    resetForm();
};
defineExpose({ resetF });

//重置内容
const resetForm = () => {
    formRef.value.resetFields();
    loadBookDetails();
};
</script>